import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider, Link, Outlet } from "react-router-dom";
import "./assets/styles/normalize.css";
import { Login } from "./pages/Login";
import { Register } from "./pages/Register";
import { UpdatePassword } from "./pages/UpdatePassword";
import { UpdateInfo } from "./pages/UpdateInfo";
import { Menu } from "@/pages/Menu";
import { Friendship } from "@/pages/Friendship";
import { Group } from "@/pages/Group";
import { Chat } from "@/pages/Chat/chat";
import { Notification } from "@/pages/Notification";
import { Collection } from "@/pages/Collection";
import App from "./App";
import "./index.css";

const routes = [
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: 'update_info',
        element: <UpdateInfo />
      },
      {
        path: '/',
        element: <Menu />,
        children: [
          {
            path: '',
            element: <Friendship />
          },
          {
            path: "group",
            element: <Group />
          },
          {
            path: 'chat',
            element: <Chat />
          },
          {
            path: 'collection',
            element: <Collection />
          },
          {
            path: 'notification',
            element: <Notification />
          }
        ]
      }
    ]
  },
  {
    path: 'login',
    element: <Login />
  },
  {
    path: 'register',
    element: <Register />
  },
  {
    path: 'update_password',
    element: <UpdatePassword />
  }
];

export const router = createBrowserRouter(routes);

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(<RouterProvider router={router}></RouterProvider>)


